<template>
	<view class="currentCom">
		<view class="show-img" v-for="(item,index) in imgList">
			<image :src="item" :style="{transform:index == scaleIndex?'scale(1.1)':'scale(1)'}" mode="aspectFill"
				@tap='previewImg(index)'></image>
			<view class="del" @tap='del(index)'>
				<u-icon name="close" color="rgba(0,0,0,.6)"></u-icon>
			</view>
		</view>

		<view class="upLoadImg" @tap='chooseImg' v-if="imgList.length < 9">
			<view class="placeholder">+</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				scaleIndex: -1,
				show: false,
				maxCount: 9
			};
		},
		methods: {
			previewImg(index) {
				uni.previewImage({
					urls: this.imgList,
					current: index
				})
			},
			chooseImg() {
				uni.chooseImage({
					count: this.maxCount - this.imgList.length,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.imgList = this.imgList.concat(res.tempFilePaths)
						console.log(res)
						// #ifdef APP-PLUS
						res.tempFilePaths.forEach((ele, index) => {
							uni.compressImage({
								src: res.tempFilePaths[index],
								quality: 70,
								success: (res) => {
									console.log(res)
									uniCloud.uploadFile({
										filePath: res.tempFilePath,
										cloudPath: `dynamic/${ele.name}.${res.tempFilePath.split('.')[res.tempFilePath.split('.').length - 1]}`,
										success: (e) => {
											console.log(e)
											this.$emit('returnImgUrl', e.fileID)
										},
										fail(err) {
											console.log('上传失败', err)
										}
									});
								}
							})
						})
					
						// #endif
						// #ifdef H5
						//获取图片扩展名
							res.tempFiles.forEach(ele=>{
								console.log(ele)
								uniCloud.uploadFile({
									filePath: ele.path,
									cloudPath: `dynamic/${ele.name}.${ele.type.split('/')[1]}`,
									success: (e) => {
											console.log(e)
										this.$emit('returnImgUrl', e.fileID)
									},
									fail(err) {
										console.log('上传失败', err)
									}
								});
							})
						// #endif
					}
				});
			},
			del(index) {
				// uniCloud.callFunction({
				// 	name:'delFile',
				// 	data:{
				// 		fileList:[this.imgList[index]]
				// 	}
				// }).then(res=>{
				// 	console.log('云函数回调',res)
				// })
				console.log(this.imgList[index])
				this.imgList.splice(index, 1)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.currentCom {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.show-img {
		margin: 5rpx;
		border: 1px solid rgba(153, 153, 153, .3);
		height: 204rpx;
		padding: 15rpx;
		width: 32%;
		position: relative;
		border-radius: 10rpx;
		
		image {
			height: 100%;
			width: 100%;
		}

		.del {
			width: 40rpx;
			height: 40rpx;
			// border: 1px solid;
			position: absolute;
			top: -20rpx;
			right: -10rpx;
			background-color: rgba(153, 153, 153, .4);
			border-radius: 50%;
			height:40rpx;
			// line-height: 40rpx;
			text-align: center
		
		}
	}

	.upLoadImg {
		margin:5rpx;
		height: 204rpx;
		width: 200rpx;
		border-radius: 10rpx;
		border: 1px solid rgba(153, 153, 153, .3);
		font-size: 100rpx;
		color: rgba(128, 128, 128, .3);
		display: flex;
		justify-content: center;
		align-items: center;

		.placeholder {
			margin: -5rpx 0 0 -5rpx;

		}
	}
</style>
